<template>
  <div class="w">
    <div class="header">
      <i class="iconfont icon-fanhui" @click="back"></i>
      <span class="title">订单详情</span>
    </div>
    <div class="info">
      <div class="info_title">
        <span v-if="ordersInfo.orderStatus == 0">订单待支付</span>
        <span v-if="ordersInfo.orderStatus == 1">订单待派送</span>
        <span v-if="ordersInfo.orderStatus == 2">订单正在派送</span>
        <span v-if="ordersInfo.orderStatus == 3">订单已送达</span>
        <span v-if="ordersInfo.orderStatus == 4">订单已取消</span>
        <span v-if="ordersInfo.orderStatus == 5">订单已退款</span>
      </div>
      <div class="dish_card">
        <div class="dish_card_title">
          <span>{{ ordersInfo.shop.shopName }}</span>
          <div class="score_right">
            <span v-if="ordersInfo.shop.mode == 1">骑手专送</span>
            <span v-if="ordersInfo.shop.mode == 0">商家自配</span>
          </div>
        </div>
        <div class="dish_card_info">
          <div class="info_list" v-for="(item, index) in ordersInfo.ordersOrDishDtoList" :key="index">
            <div class="list_left">
              <el-image :src="item.dish.dishImage" fit="cover"></el-image>
            </div>
            <div class="list_right">
              <div class="info_name">
                <span>{{ item.dish.dishName }}</span>
                <div class="amountPrice">
                  <div class="oldPrice" v-if="item.dish.oldPrice != null">
                    <span>￥</span>
                    <span>{{ item.oldPriceAmount }}</span>
                  </div>
                  <span class="icon">￥</span>
                  <span class="price">{{ item.amount }}</span>
                </div>
              </div>
              <div class="item_right_flavore">
                <span v-for="(it, ind) in item.flavore" :key="ind">{{ it }}</span>
              </div>
              <div class="info_number">
                <span>×{{ item.count }}</span>
              </div>
            </div>
          </div>
          <div class="packing_pay">
            <span>打包费</span>
            <div>
              <span class="icon">￥</span>
              <span class="price">{{ packingAcount }}</span>
            </div>
          </div>
          <div class="delivery_pay">
            <span>用户配送费</span>
            <div>
              <span class="icon">￥</span>
              <span class="price">{{ ordersInfo.shop.delivery }}</span>
            </div>
          </div>
        </div>
        <div class="dish_card_bottom">
          <div class="dish_totalPrice">
            <span>小记</span>
            <span>￥</span>
            <span>{{ allPrice }}</span>
          </div>
          <div class="dish_discounts">
            <span>已优惠</span>
            <span>￥</span>
            <span>{{ ordersInfo.discounts }}</span>
          </div>
        </div>
      </div>
      <div class="address_card">
        <div class="card_top">
          <div class="top_item">
            <span class="address_card_title">期望时间</span>
            <span class="address_card_info">立即送达</span>
          </div>
          <div class="top_item">
            <span class="address_card_title">配送地址</span>
            <span class="address_card_info">
              <div>{{ addressInfo.address }}</div>
              <div>
                <span>{{ addressInfo.people }}</span>
                <span v-if="addressInfo.sex == 0">(先生)</span>
                <span v-if="addressInfo.sex == 1">(女士)</span>
                <span>{{ addressInfo.phone }}</span>
              </div>
            </span>
          </div>
          <div class="top_item">
            <span class="address_card_title">配送服务</span>
            <span class="address_card_info" v-if="ordersInfo.shop.mode == 1">骑手专送</span>
            <span class="address_card_info" v-if="ordersInfo.shop.mode == 0">商家自配</span>
          </div>
        </div>
        <div class="card_bottom">
          <div class="top_item">
            <span class="address_card_title">交易编号</span>
            <span class="address_card_info">{{ ordersInfo.aliPayId }}</span>
          </div>
          <div class="top_item">
            <span class="address_card_title">订单编号</span>
            <span class="address_card_info">{{ ordersInfo.orderId }}</span>
          </div>
          <div class="top_item">
            <span class="address_card_title">下单时间</span>
            <span class="address_card_info">{{ ordersInfo.createTime }}</span>
          </div>
          <div class="top_item">
            <span class="address_card_title">支付时间</span>
            <span class="address_card_info">{{ ordersInfo.payTime }}</span>
          </div>
          <div class="top_item" v-if="ordersInfo.refundTime != null">
            <span class="address_card_title">退款时间</span>
            <span class="address_card_info">{{ ordersInfo.refundTime }}</span>
          </div>
          <div class="top_item">
            <span class="address_card_title">支付方式</span>
            <span class="address_card_info">在线支付</span>
          </div>
          <div class="top_item" v-if="ordersInfo.orderText != ''">
            <span class="address_card_title">备注</span>
            <span class="address_card_info">{{ ordersInfo.orderText }}</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      ordersInfo: [],
      allPrice: 0,
      packingAcount: 0,
      addressInfo: [],
    };
  },

  created() {
    this.ordersInfo = this.$route.query.ordersInfo;
    this.dealOrdersInfo();
    this.getAddressInfo();
    console.log(this.ordersInfo);
  },

  methods: {
    async getAddressInfo() {
      const { data: res } = await this.$http.get('addressBook/getById/' + this.ordersInfo.addressId);
      if (res.code == 1) {
        this.addressInfo = res.data;
      } else {
        return this.$message.error('地址信息获取失败');
      }
    },
    dealOrdersInfo() {
      for (let j = 0; j < this.ordersInfo.ordersOrDishDtoList.length; j++) {
        this.ordersInfo.ordersOrDishDtoList[j].amount = Math.formatFloat(
          this.ordersInfo.ordersOrDishDtoList[j].count * this.ordersInfo.ordersOrDishDtoList[j].dish.dishPrice,
          2,
        );
        if (this.ordersInfo.ordersOrDishDtoList[j].dish.oldPrice != null) {
          this.ordersInfo.ordersOrDishDtoList[j].oldPriceAmount = Math.formatFloat(
            this.ordersInfo.ordersOrDishDtoList[j].count * this.ordersInfo.ordersOrDishDtoList[j].dish.oldPrice,
            2,
          );
        }
      }
      this.getPackingAcount();
      this.getAllPrice();
    },
    getAllPrice() {
      var sum = 0;

      for (let j = 0; j < this.ordersInfo.ordersOrDishDtoList.length; j++) {
        sum = sum + this.ordersInfo.ordersOrDishDtoList[j].amount;
      }

      this.allPrice = Math.formatFloat(sum + this.ordersInfo.shop.delivery + this.packingAcount, 2);
    },

    getPackingAcount() {
      this.packingAcount = this.ordersInfo.ordersOrDishDtoList.length;
    },
    back() {
      this.$router.go(-1);
    },
  },
};
</script>

<style lang="scss" scoped>
.w {
  height: 100vh;
  width: 100%;
  position: relative;
  background-color: #f6f6f6;
  .header {
    height: 61px;
    color: #232425;
    text-align: center;
    position: relative;
    border: none;
    .icon-fanhui {
      position: absolute;
      font-size: 25px;
      line-height: 61px;
      left: 10px;
      font-weight: bold;
    }
    .title {
      font-size: 20px;
      line-height: 61px;
      font-weight: bold;
    }
  }
  .info::-webkit-scrollbar {
    display: none;
  }
  .info {
    padding: 15px;
    height: calc(100vh - 90px);
    overflow: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
    .info_title {
      font-weight: bold;
      font-size: 30px;
      color: #000000;
      letter-spacing: 2px;
      margin-left: 10px;
    }
    .dish_card {
      background-color: #fefefe;
      border-radius: 10px;
      padding: 15px;
      margin-top: 10px;
      .dish_card_title {
        border-bottom: 1px solid #f6f2f2;
        height: 35px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 10px;
        line-height: 35px;
        color: #252627;
        .score_right {
          border: 1px solid #ebe5d5;
          background-color: #fefffd;
          color: #ed8c3b;
          font-size: 5px;
          padding: 0px 4px;
          border-radius: 5px;
          height: 20px;
          line-height: 20px;
        }
      }
      .dish_card_info {
        margin-top: 20px;
        .icon {
          font-size: 10px;
          margin-right: 2px;
        }
        .price {
          font-size: 17px;
        }
        .info_list {
          display: flex;
          align-items: center;
          margin-bottom: 10px;
          .list_left {
            height: 60px;
            width: 60px;
            margin-right: 10px;
            :deep(.el-image) {
              height: 100%;
              width: 100%;
              border-radius: 10px;
            }
          }
          .list_right {
            .info_name {
              display: flex;
              justify-content: space-between;
              align-items: center;
              width: 260px;
              color: #000000;
              font-size: 17px;
              .amountPrice {
                display: flex;
                align-items: baseline;
                .oldPrice {
                  margin-right: 10px;
                  span:nth-child(1) {
                    color: #939393;
                    font-size: 5px;
                    text-decoration: line-through;
                  }
                  span:nth-child(2) {
                    color: #939393;
                    font-size: 13px;
                    text-decoration: line-through;
                  }
                }
              }
            }
            .item_right_flavore {
              font-size: 12px;
              color: #8f8f8f;
            }
            .info_number {
              color: #a4a4a4;
              font-size: 15px;
            }
          }
        }
        .packing_pay {
          display: flex;
          justify-content: space-between;
          align-items: center;
          margin-top: 20px;
          margin-bottom: 10px;
        }
        .delivery_pay {
          display: flex;
          justify-content: space-between;
          align-items: center;
          margin-bottom: 20px;
        }
      }
      .dish_card_bottom {
        display: flex;
        border-top: 1px solid #f6f2f2;
        height: 45px;
        line-height: 45px;
        flex-direction: row-reverse;
        .dish_discounts {
          margin-right: 15px;
          span:nth-child(1) {
            color: #000000;
            margin-right: 2px;
          }
          span:nth-child(2) {
            font-size: 10px;
            color: #e75a4c;
          }
          span:nth-child(3) {
            color: #e75a4c;
          }
        }
        .dish_totalPrice {
          span:nth-child(1) {
            color: #000000;
            margin-right: 15px;
          }
          span:nth-child(2) {
            font-size: 12px;
            color: #000000;
          }
          span:nth-child(3) {
            color: #000000;
            font-size: 19px;
          }
        }
      }
    }
    .address_card {
      background-color: #fefefe;
      border-radius: 10px;
      padding: 15px;
      margin-top: 10px;
      .top_item {
        margin-bottom: 10px;
        display: flex;
        justify-content: space-between;
        .address_card_title {
          color: #878889;
        }
        .address_card_info {
          display: inline-block;
          width: 250px;
          word-break: break-all;
          white-space: normal;
          text-align: right;
          div:nth-child(1) {
            margin-bottom: 5px;
          }
          div:nth-child(2) {
            span:nth-child(2) {
              margin-right: 5px;
            }
          }
        }
      }
      .card_top {
        border-bottom: 2px solid #f8f8f8;
        div:nth-child(3) {
          margin-bottom: 20px;
        }
      }
      .card_bottom {
        div:nth-child(1) {
          margin-top: 20px;
        }
      }
    }
  }
}
</style>